
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#tan {
				background: white;
				width: 500px;
				border: 1px solid #e9e4e4;
				display: none;
				position: fixed;
				opacity: 0;
				transition: all .3s;
				z-index:10;
			}
			
			.cha {
				text-align: right;
				margin-right: 4px;
				cursor: pointer;
			}
			
			#d1 {
				text-align: center;
				font-size: 20px;
			}
			
			.d2 {
				text-align: center;
				margin-top: 16px;
			}
			
			.d2 a {
				text-decoration: none;
				color: #3481cf;
			}
			
			.d2 a:hover {
				text-decoration: underline;
			}
			
			.inputtext {
				text-align: center;
				margin-top: 20px;
			}
			
			.inputtext input {
				padding: 8px 0px 8px 6px;
				width: 250px;
			}
			
			.pass {
				text-align: center;
				margin-top: 10px;
			}
			
			.pass input {
				padding: 8px 0px 8px 6px;
				width: 250px;
			}
			
			.login {
				text-align: center;
				margin-top: 10px;
			}
			
			.login input {
				width: 260px;
				background: #86ce2f;
				cursor: pointer;
				height: 40px;
				font-size: 16px;
				border: none;
				color: white;
			}
			
			.fot {
				text-align: right;
				margin-top: 60px;
				margin-bottom: 10px;
			}
			
			.fot a {
				margin: 0px 6px;
				text-decoration: none;
				color: #666;
				font-size: 14px;
			}
			
			.fot a:hover {
				text-decoration: underline;
			}
			
			.fot a:last-child {
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div id="tan">
			<div class="cha" id="cha">×</div>
			<div id="d1">账号密码登录</div>
			<div class="d2">推荐使用
				<a href="">快速安全登录</a>，防止盗号。</div>
			<div class="inputtext">
				<input type="text" placeholder="支持QQ号/邮箱/手机号登录" />
			</div>
			<div class="pass">
				<input type="password" placeholder="密码" />
			</div>
			<div class="login">
				<input type="button" value="登录" id="denglu" />
			</div>
			<div class="fot">
				<a href="">忘记密码</a>|
				<a href="">注册账号</a>|
				<a href="">意见反馈</a>
			</div>
		</div>
		<input type="button" value="QQ登录" id="tankuang" />
		<div id="mask"></div>
		<script>
			var w = document.body.scrollWidth;
			var h = document.body.scrollHeight;
			mask.style.width=w+"px";
			mask.style.height=h+"px";
			mask.style.background="rgba(0,0,0,.3)";
			mask.style.position="absolute";
			mask.style.left="0px";
			mask.style.top="0px";
			mask.style.display="none";
			cha.onclick=denglu.onclick=function(){
				tan.style.opacity=0;
				tan.style.left="-2000px";
				mask.style.display="none";
				setTimeout(function(){
					tan.style.display="none";
				},300);
			}
			tankuang.onclick =btn;
			function btn() {
				mask.style.display="block";
				tan.style.opacity=1;
				tan.style.display = "block";
				var w = document.body.clientWidth;
				var h = document.body.clientHeight;
				var alertw = tan.clientWidth;
				var alerth = tan.clientHeight;
				tan.style.left = w / 2 - alertw / 2 + "px";
				tan.style.top = h / 2 - alerth / 2 + "px";
			}
			//当浏览器窗口调整时，弹框也随之调整！
			window.onresize=function(){
				btn();
			}
		</script>
	</body>

</html>